import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { TouchableOpacity, View, Image, Text } from 'react-native'
import styles from './Styles/SingleCommodityStyle'

export default class SingleCommodity extends Component {
  // Prop type warnings
  static propTypes = {
    style: PropTypes.object,
    navigation: PropTypes.object,
    data: PropTypes.object,
  }
  
  // Defaults for props
  static defaultProps = {
    data: null,
  }

  render () {
    const object = this.props.data
    if (!object) {
      return <Text>获取服务失败</Text>
    }
    const { navigate } = this.props.navigation
    return (
      <TouchableOpacity
        style={styles.container}
        activeOpacity={0.7}
        onPress={()=>navigate('CommodityDetailScreen',{id:object.id})}>
        <Image style={styles.cover} source={{uri:object.img}} />
        <View style={styles.main}>
          <Text style={styles.title}>{object.name}</Text>
          <Text>
            价格:<Text style={styles.price}>{object.price}</Text>元,
            时长:<Text style={styles.price}>{object.clock}</Text>分钟
          </Text>
        </View>
      </TouchableOpacity>
    )
  }
}
